<template>
  <div class="h-full overflow-hidden border-box">
    <div class="h-full bg-white overflow-hidden p-10px">
      <div p="t20px b20px l200px r200px" flex>
        <div flex-1 flex justify-start>
          <n-steps w300px vertical :current="current" :status="'process'">
            <n-step title="填写转账信息" />
            <n-step title="确认转账信息" />
            <n-step title="完成" />
          </n-steps>
          <div flex-1>
            <Step1 v-if="current == 1" @nextStep="nextStep"></Step1>
            <Step2 v-if="current == 2" @nextStep="nextStep" @prevStep="prevStep"></Step2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';
const Step1 = defineAsyncComponent(() => import('@/views/examples/steps/components/step-1.vue'));
const Step2 = defineAsyncComponent(() => import('@/views/examples/steps/components/step-2.vue'));
let current = ref(1);
const nextStep = () => {
  const $$current = current.value;
  $$current < 3 ? (current.value += 1) : null;
};
const prevStep = () => {
  const $$current = current.value;
  $$current > 1 ? (current.value -= 1) : null;
};
</script>

<style scoped></style>
